<template>
  <div class="vocabulary-list">
    <h2 v-if="title">{{ title }}</h2>
    
    <div class="search-box" v-if="showSearch">
      <el-input 
        v-model="searchTerm" 
        placeholder="Search vocabulary..."
        @input="handleSearch"
        clearable
      >
        <template #prefix>
          <el-icon><search /></el-icon>
        </template>
      </el-input>
    </div>
    
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-alert
      v-else-if="error"
      :title="error"
      type="error"
      show-icon
      :closable="false"
    />
    <el-empty v-else-if="vocabularies.length === 0 && searchTerm" :description="'No vocabulary found for \'' + searchTerm + '\''" />
    <div v-else>
      <VocabularyCard 
        v-for="vocab in vocabularies" 
        :key="vocab.word"
        :vocabulary="vocab"
        @play-audio="playAudio"
      />
    </div>
  </div>
</template>

<script>
import VocabularyCard from './VocabularyCard.vue'
import { ElInput, ElSkeleton, ElAlert, ElEmpty, ElIcon } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

export default {
  name: 'VocabularyList',
  components: {
    VocabularyCard,
    ElInput,
    ElSkeleton,
    ElAlert,
    ElEmpty,
    ElIcon,
    Search
  },
  props: {
    title: {
      type: String,
      default: 'Vocabulary'
    },
    initialVocabularies: {
      type: Array,
      default: () => []
    },
    showSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      vocabularies: this.initialVocabularies,
      searchTerm: '',
      loading: false,
      error: null
    }
  },
  methods: {
    handleSearch() {
      // In a real implementation, this would call the search API
      this.$emit('search', this.searchTerm)
    },
    
    playAudio(word) {
      // In a real implementation, this would play the pronunciation audio
      console.log(`Playing audio for: ${word}`)
      this.$emit('play-audio', word)
    }
  }
}
</script>

<style scoped>
.vocabulary-list {
  padding: 20px;
}

.search-box {
  margin-bottom: 20px;
}
</style>